<template>
  <div>
    <h2>状态</h2>
    <div class="state">
      <el-card class="box-card">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="date" label="系统" width="300">
          </el-table-column>
          <el-table-column prop="name"> </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="memory">
      <el-card class="box-card">
        <el-table :data="memory" stripe style="width: 100%">
          <el-table-column prop="available" label="内存" width="300">
          </el-table-column>
          <el-table-column>
            <template>
              <el-progress
                :text-inside="true"
                :stroke-width="26"
                :percentage="70"
                :format="progressText"
              ></el-progress>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="interface">
      <el-card class="box-card">
        <div><h5>接口</h5></div>
        <div class="interface_text">
          <center>
            <div>eth0</div>
            <div>
              <img src="../../assets/images/port_up.png" alt="" srcset="" />
            </div>
            <div>1000Mb/s</div>
            <div>全双工</div>
          </center>
        </div>
      </el-card>
    </div>
    <div class="network">
      <el-card class="box-card">
        <el-table :data="networkData" stripe style="width: 100%">
          <el-table-column prop="state" label="网络" width="300">
          </el-table-column>
          <el-table-column prop="status">
            <template>
              <el-progress
                :text-inside="true"
                :stroke-width="26"
                :percentage="70"
                :format="progressText"
              ></el-progress>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="DHCP">
      <el-card class="box-card">
        <div><h5>DHCP 分配</h5></div>
        <el-table border style="width: 100%">
          <el-table-column prop="date" label="主机名"> </el-table-column>
          <el-table-column prop="name" label="IPV4地址"> </el-table-column>
          <el-table-column prop="address" label="MAC地址"> </el-table-column>
          <el-table-column prop="address" label="剩余租期"> </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="DHCPV6">
      <el-card class="box-card">
        <div><h5>DHCP V6分配</h5></div>
        <el-table border style="width: 100%">
          <el-table-column prop="" label="主机"></el-table-column>
          <el-table-column prop="name" label="IPV6地址"> </el-table-column>
          <el-table-column prop="address" label="DUID"> </el-table-column>
          <el-table-column prop="address" label="剩余租期"> </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "主机名",
          name: "OpenWrt",
        },
        {
          date: "型号",
          name: "Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz : 1 Core 1 Thread",
        },
        {
          date: "CPU信息",
          name: "2399.998 MHz",
        },
        {
          date: "固件版本",
          name:
            "OpenWrt R20.12.12 / Mask Ver.D201231 / LuCI Master (git-20.343.54716-6fc079f)",
        },
        {
          date: "内核版本",
          name: "5.4.85",
        },
        {
          date: "本地时间",
          name: "Mon Sep 6 10:00:48 2021",
        },
        {
          date: "运行时间",
          name: "0h 36m 13s",
        },

        {
          date: "平均负载",
          name: "0.22, 0.39, 0.26",
        },
        {
          date: "CPU使用率",
          name: "0 %",
        },
      ],
      memory: [
        {
          available: "可用数",
        },
        {
          available: "已缓存",
        },
      ],
      text: "889MB/987MB(89%)",
      networkData: [
        {
          state: "IPv4 WAN 状态",
          status: "未连接",
        },
        {
          state: "IPv6 WAN 状态",
          status: "未连接",
        },
        {
          state: "在线用户数",
          status: 1,
        },
        {
          state: "活动连接数",
          status: function () {
            return text;
          },
        },
      ],
    };
  },
  methods: {
    progressText() {
      return this.text;
    },
  },
};
</script>

<style scoped>
.interface_text {
  color: #32325d;
  padding: 1px;
}
.interface h5 {
  color: #909399;
}
.memory,
.interface,
.network,
.DHCP,
.DHCPV6 {
  margin-top: 16px;
}
.el-table {
  margin-top: 0;
  color: #32325d;
}
.el-table td {
  padding: 6px;
}
</style>